<template>
  <el-card shadow="never">
    <template #header>
      <div class="h-3 flex justify-between">
        <span>设备位置分布图</span>
        <div class="flex items-center gap-3">
          <div class="flex items-center gap-2">
            <span class="text-sm text-gray-600">地图类型:</span>
            <el-switch
              v-model="isSatelliteMap"
              @change="toggleMapType"
              active-text="卫星"
              inactive-text="普通"
              size="small"
            />
          </div>
          <el-button type="primary" size="small" @click="refreshDevices">
            <Icon icon="ep:refresh" class="mr-5px" /> 刷新
          </el-button>
        </div>
      </div>
    </template>
    <div class="map-container">
      <div id="deviceMap" class="map-content" style="width: 100%; height: 400px"></div>
      <div class="map-legend">
        <div class="legend-item">
          <div class="legend-icon online"></div>
          <span
            >在线设备 <span class="device-count">{{ onlineDeviceCount }}</span></span
          >
        </div>
        <div class="legend-item">
          <div class="legend-icon offline"></div>
          <span
            >离线设备 <span class="device-count">{{ offlineDeviceCount }}</span></span
          >
        </div>
      </div>
      <div v-if="loading" class="map-loading">
        <el-skeleton animated>
          <template #template>
            <div style="height: 400px; display: flex; align-items: center; justify-content: center">
              <span>地图加载中...</span>
            </div>
          </template>
        </el-skeleton>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { DeviceApi } from '@/api/mqtt/device'
import { SystemConfigApi } from '@/api/mqtt/systemconfig'

// 腾讯地图类型声明
declare global {
  interface Window {
    TMap: any
    returnToGlobalView: () => void
    closeInfoWindow: () => void
  }
}

defineOptions({ name: 'DeviceMap' })

const loading = ref(true)
const onlineDeviceCount = ref(0)
const offlineDeviceCount = ref(0)
const isSatelliteMap = ref(true) // 地图类型切换状态，默认为卫星地图
let map: any = null
let markers: any[] = []
let mapKey = ref('')
let currentInfoWindow: any = null // 当前显示的信息窗口
let globalViewState = { center: { lat: 35.8617, lng: 104.1954 }, zoom: 3 } // 保存全局视图状态，默认进一步缩小到能看到完整中国版图

// 从数据库获取腾讯地图密钥
const getMapKey = async () => {
  try {
    const response = await SystemConfigApi.getSystemConfigPage({
      pageNo: 1,
      pageSize: 1,
      sysKey: 'weixin_map'
    })
    mapKey.value = response.list[0].sysValue
    return mapKey.value
  } catch (error) {
    console.error('获取地图密钥失败:', error)
    return null
  }
}

// 动态加载腾讯地图API
const loadMapScript = (key: string): Promise<any> => {
  return new Promise((resolve, reject) => {
    // 检查是否已经加载过
    if (window.TMap) {
      resolve(window.TMap)
      return
    }

    const script = document.createElement('script')
    script.src = `https://map.qq.com/api/gljs?v=1.exp&key=${key}`
    script.async = true

    script.onload = () => {
      // 确保API完全加载
      setTimeout(() => {
        if (window.TMap) {
          resolve(window.TMap)
        } else {
          console.error('腾讯地图API加载失败')
          reject(new Error('腾讯地图API加载失败'))
        }
      }, 100)
    }

    script.onerror = () => {
      reject(new Error('腾讯地图API加载失败'))
    }

    document.head.appendChild(script)
  })
}

// 获取设备地址信息（暂时使用设备自带地址）
const getDeviceAddress = async (lat: number, lng: number, deviceAddress?: string) => {
  // 由于CORS限制，暂时使用设备自带的地址信息
  if (deviceAddress) {
    return deviceAddress
  }
  return '未知地址'
}

// 工具函数
const isValidCoordinate = (lat: number, lng: number) =>
  lat && lng && lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180 && lat !== 0 && lng !== 0

const isInChinaRange = (lat: number, lng: number) =>
  lat >= 18 && lat <= 54 && lng >= 73 && lng <= 135

// 计算设备统计
const calculateDeviceCounts = (devices: any[]) => {
  let online = 0,
    offline = 0
  devices.forEach((device) => {
    const lat = parseFloat(device.latitude)
    const lng = parseFloat(device.longitude)
    if (isValidCoordinate(lat, lng)) {
      device.isOnline === '1' ? online++ : offline++
    }
  })
  onlineDeviceCount.value = online
  offlineDeviceCount.value = offline
  return { online, offline }
}

// 计算最优视图配置
const calculateOptimalViewport = (devices: any[]) => {
  const validDevices = devices.filter((device) => {
    const lat = parseFloat(device.latitude)
    const lng = parseFloat(device.longitude)
    return isValidCoordinate(lat, lng)
  })

  if (validDevices.length === 0) {
    return {
      center: { lng: 104.1954, lat: 35.8617 },
      zoom: 1,
      bounds: null
    }
  }

  // 计算边界
  const lats = validDevices.map((d) => parseFloat(d.latitude))
  const lngs = validDevices.map((d) => parseFloat(d.longitude))
  const minLat = Math.min(...lats),
    maxLat = Math.max(...lats)
  const minLng = Math.min(...lngs),
    maxLng = Math.max(...lngs)

  // 处理跨180度经线
  let adjustedMinLng = minLng,
    adjustedMaxLng = maxLng
  if (maxLng - minLng > 180) {
    const lngsSorted = [...lngs].sort((a, b) => a - b)
    let maxGap = 0,
      gapStart = 0
    for (let i = 0; i < lngsSorted.length - 1; i++) {
      const gap = lngsSorted[i + 1] - lngsSorted[i]
      if (gap > maxGap) {
        maxGap = gap
        gapStart = lngsSorted[i]
      }
    }
    if (maxGap > 180) {
      const leftLngs = lngs.filter((lng) => lng <= gapStart)
      const rightLngs = lngs.filter((lng) => lng > gapStart + maxGap)
      if (leftLngs.length > 0 && rightLngs.length > 0) {
        adjustedMinLng = -180
        adjustedMaxLng = 180
      } else if (leftLngs.length > 0) {
        adjustedMinLng = Math.min(...leftLngs)
        adjustedMaxLng = Math.max(...leftLngs)
      } else {
        adjustedMinLng = Math.min(...rightLngs)
        adjustedMaxLng = Math.max(...rightLngs)
      }
    }
  }

  // 计算中心点和缩放级别
  const center = {
    lng: (adjustedMinLng + adjustedMaxLng) / 2,
    lat: (minLat + maxLat) / 2
  }

  const maxDiff = Math.max(maxLat - minLat, adjustedMaxLng - adjustedMinLng)
  const isMainlyInChina = minLat >= 18 && maxLat <= 54 && minLng >= 73 && maxLng <= 135
  const chinaDeviceRatio =
    validDevices.filter((d) => isInChinaRange(parseFloat(d.latitude), parseFloat(d.longitude)))
      .length / validDevices.length

  // 智能缩放级别计算
  let zoom = 10
  if (isMainlyInChina || chinaDeviceRatio >= 0.5) {
    zoom =
      maxDiff > 20
        ? 2.8
        : maxDiff > 10
          ? 3.8
          : maxDiff > 5
            ? 4.8
            : maxDiff > 2
              ? 5.8
              : maxDiff > 1
                ? 6.8
                : 7.8
  } else {
    zoom =
      maxDiff > 180
        ? 3
        : maxDiff > 100
          ? 4
          : maxDiff > 50
            ? 5
            : maxDiff > 20
              ? 6
              : maxDiff > 10
                ? 7
                : maxDiff > 5
                  ? 8
                  : maxDiff > 2
                    ? 9
                    : 10
  }

  // 中国地图优化
  if ((isMainlyInChina && zoom <= 3) || (chinaDeviceRatio >= 0.7 && zoom <= 4)) {
    center.lat = 35.8617
    center.lng = 104.1954
    zoom = Math.max(1, zoom)
  }

  return {
    center,
    zoom: Math.max(0, Math.min(zoom, 15)),
    bounds: { minLat, maxLat, minLng: adjustedMinLng, maxLng: adjustedMaxLng, maxDiff }
  }
}

// 处理重叠坐标的函数
const processOverlappingCoordinates = (devices: any[]) => {
  const processedDevices: any[] = []
  const coordinateGroups = new Map<string, any[]>()

  // 将设备按坐标分组
  for (const device of devices) {
    const lat = parseFloat(device.latitude)
    const lng = parseFloat(device.longitude)

    if (
      lat &&
      lng &&
      lat >= -90 &&
      lat <= 90 &&
      lng >= -180 &&
      lng <= 180 &&
      lat !== 0 &&
      lng !== 0
    ) {
      // 将坐标四舍五入到小数点后4位，用于分组
      const key = `${lat.toFixed(4)},${lng.toFixed(4)}`

      if (!coordinateGroups.has(key)) {
        coordinateGroups.set(key, [])
      }
      coordinateGroups.get(key)!.push(device)
    }
  }

  // 处理每个坐标组
  for (const [key, groupDevices] of coordinateGroups) {
    if (groupDevices.length === 1) {
      // 单个设备，直接添加
      processedDevices.push({
        ...groupDevices[0],
        offsetX: 0,
        offsetY: 0,
        isCluster: false
      })
    } else {
      // 多个设备重叠，创建偏移
      const baseLat = parseFloat(groupDevices[0].latitude)
      const baseLng = parseFloat(groupDevices[0].longitude)

      // 计算偏移角度和距离
      const angleStep = (2 * Math.PI) / groupDevices.length
      const offsetDistance = 0.0001 // 约10米的偏移距离

      groupDevices.forEach((device: any, index: number) => {
        const angle = index * angleStep
        const offsetLat = Math.sin(angle) * offsetDistance
        const offsetLng = Math.cos(angle) * offsetDistance

        processedDevices.push({
          ...device,
          latitude: baseLat + offsetLat,
          longitude: baseLng + offsetLng,
          offsetX: Math.cos(angle) * 15, // 像素偏移
          offsetY: Math.sin(angle) * 15,
          isCluster: true,
          clusterSize: groupDevices.length,
          clusterDevices: groupDevices
        })
      })
    }
  }

  return processedDevices
}

// 获取设备数据
const getDevices = async () => {
  try {
    loading.value = true
    const response = await DeviceApi.mapList()

    if (response?.length > 0) {
      const deviceCounts = calculateDeviceCounts(response)
      console.log(`设备统计: 在线 ${deviceCounts.online} 个, 离线 ${deviceCounts.offline} 个`)
      await initMap(response)
    } else {
      onlineDeviceCount.value = offlineDeviceCount.value = 0
      await initMap([])
    }
  } catch (error) {
    console.error('获取设备数据失败:', error)
    ElMessage.error('获取设备数据失败，请检查网络连接')
    onlineDeviceCount.value = offlineDeviceCount.value = 0
    await initMap([])
  } finally {
    loading.value = false
  }
}

// 初始化地图
const initMap = async (devices: any[]) => {
  try {
    // 获取地图密钥
    const key = await getMapKey()
    if (!key) {
      console.error('无法获取地图密钥')
      return
    }

    // 加载地图API
    const TMap = await loadMapScript(key)

    // 确保DOM元素存在
    let mapElement = document.getElementById('deviceMap')
    if (!mapElement) {
      await new Promise((resolve) => setTimeout(resolve, 500))
      mapElement = document.getElementById('deviceMap')
      if (!mapElement) {
        console.error('地图容器元素不存在，无法初始化地图')
        return
      }
    }

    // 清除之前的标记
    if (markers.length > 0) {
      markers.forEach((marker) => {
        if (map && marker) {
          map.remove(marker)
        }
      })
      markers = []
    }

    // 使用智能辅助函数计算最佳视野
    const viewport = calculateOptimalViewport(devices)
    const { center, zoom, bounds } = viewport

    console.log('智能视野计算:', {
      bounds,
      center,
      zoom,
      deviceCount: devices.length,
      chinaDeviceRatio: bounds
        ? devices.filter((device) => {
            const lat = parseFloat(device.latitude)
            const lng = parseFloat(device.longitude)
            return isInChinaRange(lat, lng)
          }).length / devices.length
        : 0
    })

    // 显示设备分布信息
    const deviceCountWithValidCoords = devices.filter((device) => {
      const lat = parseFloat(device.latitude)
      const lng = parseFloat(device.longitude)
      return (
        lat && lng && lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180 && lat !== 0 && lng !== 0
      )
    }).length

    if (deviceCountWithValidCoords > 0) {
      const chinaDevices = devices.filter((d) =>
        isInChinaRange(parseFloat(d.latitude), parseFloat(d.longitude))
      ).length
      const stats = `（在线 ${onlineDeviceCount.value} 个，离线 ${offlineDeviceCount.value} 个）`

      if (chinaDevices === deviceCountWithValidCoords) {
        ElMessage.success(
          `地图已智能调整，显示 ${deviceCountWithValidCoords} 个中国设备的位置分布${stats}，已缩小到完整中国版图视图`
        )
      } else if (chinaDevices > 0) {
        ElMessage.success(
          `地图已智能调整，显示 ${deviceCountWithValidCoords} 个设备的位置分布（其中 ${chinaDevices} 个在中国）${stats}，已缩小到完整中国版图视图`
        )
      } else {
        ElMessage.success(
          `地图已智能调整，显示 ${deviceCountWithValidCoords} 个设备的位置分布${stats}`
        )
      }
    } else if (devices.length > 0) {
      ElMessage.warning('设备数据中没有有效的坐标信息，请检查设备配置')
    } else {
      ElMessage.info('显示完整中国版图，已缩小到能看到完整中国版图的合适大小')
    }

    // 创建地图实例
    if (!map) {
      map = new TMap.Map(mapElement, {
        center: new TMap.LatLng(center.lat, center.lng),
        zoom: zoom,
        viewMode: '2D',
        pitch: 0,
        rotation: 0,
        scale: 1,
        mapStyleId: 'style1', // 使用高清地图样式
        showIndoorMap: false,
        dragEnable: true,
        zoomEnable: true,
        doubleClickZoom: true,
        scrollWheel: true,
        touchEnable: true,
        keyboardEnable: false,
        baseMap: {
          type: isSatelliteMap.value ? 'satellite' : 'vector', // 根据切换状态动态设置地图类型
        },
        jogEnable: true,
        animateEnable: true,
        showIndoorMapPoi: false,
        showIndoorMapControl: false,
        // 设置地图边界，确保中国地图完整显示
        minZoom: 1,
        maxZoom: 18
      })

      // 添加地图点击事件，用于关闭信息窗口
      map.on('click', (evt: any) => {
        // 如果点击的是地图空白区域，关闭信息窗口
        if (!evt.geometry) {
          if (currentInfoWindow) {
            currentInfoWindow.close()
            currentInfoWindow = null
            console.log('关闭信息窗口')
          }
        }
      })
    } else {
      map.setCenter(new TMap.LatLng(center.lat, center.lng))
      map.setZoom(zoom)
    }

    // 处理重叠坐标
    const processedDevices = processOverlappingCoordinates(devices)

    // 统计聚类信息
    const clusterDevices = processedDevices.filter((device) => device.isCluster)
    const singleDevices = processedDevices.filter((device) => !device.isCluster)

    // 添加设备标记
    const markerList: any[] = []
    let validDeviceCount = 0

    for (const device of processedDevices) {
      // 验证坐标的有效性
      const lat = parseFloat(device.latitude)
      const lng = parseFloat(device.longitude)

      if (
        lat &&
        lng &&
        lat >= -90 &&
        lat <= 90 &&
        lng >= -180 &&
        lng <= 180 &&
        lat !== 0 &&
        lng !== 0
      ) {
        // 获取设备地址信息
        const address = await getDeviceAddress(lat, lng, device.address)
        validDeviceCount++

        // 根据是否为聚类设备选择样式
        const isClusterDevice = device.isCluster
        const markerSize = isClusterDevice ? 20 : 24 // 聚类设备稍微小一点

        const marker = new TMap.MultiMarker({
          map: map,
          styles: {
            online: new TMap.MarkerStyle({
              width: markerSize,
              height: markerSize,
              anchor: { x: markerSize / 2, y: markerSize / 2 },
              src: ''
            }),
            offline: new TMap.MarkerStyle({
              width: markerSize,
              height: markerSize,
              anchor: { x: markerSize / 2, y: markerSize / 2 },
              src: ''
            })
          },
          geometries: [
            {
              id: `device-${device.id}`,
              styleId: device.isOnline === '1' ? 'online' : 'offline',
              position: new TMap.LatLng(lat, lng),
              properties: {
                title: device.deviceName || '未知设备',
                deviceKey: device.deviceKey || '',
                isOnline: device.isOnline === '1' ? '在线' : '离线',
                address: address,
                onlineTime: device.onlineTime || '',
                latitude: lat,
                longitude: lng,
                isCluster: isClusterDevice,
                clusterSize: device.clusterSize || 1,
                clusterDevices: device.clusterDevices || [device]
              }
            }
          ]
        })

        markers.push(marker)
        markerList.push(marker)

        // 添加鼠标悬停事件
        let hoverInfoWindow: any = null
        let hoverTimeout: any = null

        marker.on('mouseover', (evt: any) => {
          const geometry = evt.geometry
          const properties = geometry.properties

          // 清除之前的定时器
          if (hoverTimeout) {
            clearTimeout(hoverTimeout)
            hoverTimeout = null
          }

          // 延迟显示信息窗口，避免鼠标快速移动时频繁显示
          hoverTimeout = setTimeout(() => {
            // 创建悬停信息窗口
            const clusterInfo = properties.isCluster
              ? `<p style="margin: 3px 0; font-size: 11px; color: #ff6b35;"><strong⚠️ 重叠设备:</strong> 此位置有 ${properties.clusterSize} 个设备</p>`
              : ''

            hoverInfoWindow = new TMap.InfoWindow({
              map: map,
              position: geometry.position,
              content: `
                <div style="padding: 8px; max-width: 250px; background: rgba(255, 255, 255, 0.95); border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);">
                  <h4 style="margin: 0 0 6px 0; color: #333; font-size: 14px; font-weight: 600;">${properties.title}</h4>
                  ${clusterInfo}
                  <p style="margin: 3px 0; font-size: 11px; color: #666;"><strong>设备ID:</strong> ${properties.deviceKey}</p>
                  <p style="margin: 3px 0; font-size: 11px; color: #666;"><strong>状态:</strong>
                    <span style="color: ${properties.isOnline === '在线' ? '#27AA63' : '#FF4949'}; font-weight: 600;">
                      ${properties.isOnline}
                    </span>
                  </p>
                  <p style="margin: 3px 0; font-size: 11px; color: #666;"><strong>地址:</strong> ${properties.address}</p>
                  <p style="margin: 3px 0; font-size: 11px; color: #666;"><strong>坐标:</strong> ${properties.latitude.toFixed(6)}, ${properties.longitude.toFixed(6)}</p>
                </div>
              `,
              offset: { x: 0, y: -30 } // 向上偏移，避免遮挡标记
            })
          }, 300) // 300ms延迟
        })

        marker.on('mouseout', () => {
          // 清除定时器
          if (hoverTimeout) {
            clearTimeout(hoverTimeout)
            hoverTimeout = null
          }

          // 关闭悬停信息窗口
          if (hoverInfoWindow) {
            hoverInfoWindow.close()
            hoverInfoWindow = null
          }
        })

        // 添加点击事件
        marker.on('click', (evt: any) => {
          const geometry = evt.geometry
          const properties = geometry.properties

          // 关闭之前的信息窗口
          if (currentInfoWindow) {
            currentInfoWindow.close()
          }

          // 放大地图到设备位置
          const deviceLat = properties.latitude
          const deviceLng = properties.longitude

          // 计算合适的缩放级别 - 确保设备标记可见
          let zoomLevel = 11 // 使用更合适的缩放级别
          if (properties.isCluster && properties.clusterSize > 1) {
            // 如果是重叠设备，使用更小的缩放级别
            zoomLevel = Math.max(9, 11 - Math.min(properties.clusterSize, 3))
          }

          // 确保缩放级别在合理范围内
          zoomLevel = Math.max(8, Math.min(zoomLevel, 14))

          // 直接设置中心点和缩放级别，不使用动画避免错误
          map.setCenter(new TMap.LatLng(deviceLat, deviceLng))
          map.setZoom(zoomLevel)

          // 创建详细信息窗口（点击时显示）
          let clusterContent = ''
          if (
            properties.isCluster &&
            properties.clusterDevices &&
            properties.clusterDevices.length > 1
          ) {
            clusterContent = `
              <div style="margin: 8px 0; padding: 8px; background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px;">
                <p style="margin: 0 0 6px 0; font-size: 12px; color: #856404; font-weight: 600;">⚠️ 此位置有 ${properties.clusterSize} 个重叠设备:</p>
                <div style="max-height: 120px; overflow-y: auto;">
                  ${properties.clusterDevices
                    .map(
                      (dev: any, index: number) => `
                    <div style="margin: 4px 0; padding: 4px; background: ${dev.isOnline === '1' ? 'rgba(39, 170, 99, 0.1)' : 'rgba(255, 73, 73, 0.1)'}; border-radius: 3px; border-left: 3px solid ${dev.isOnline === '1' ? '#27AA63' : '#FF4949'};">
                      <p style="margin: 0; font-size: 11px; color: #333;"><strong>${index + 1}. ${dev.deviceName || '未知设备'}</strong></p>
                      <p style="margin: 2px 0 0 0; font-size: 10px; color: #666;">ID: ${dev.deviceKey} | 状态: ${dev.isOnline === '1' ? '在线' : '离线'}</p>
                    </div>
                  `
                    )
                    .join('')}
                </div>
              </div>
            `
          }

          currentInfoWindow = new TMap.InfoWindow({
            map: map,
            position: geometry.position,
            content: `
              <div style="padding: 12px; max-width: 320px; background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); border: 2px solid ${properties.isOnline === '在线' ? '#27AA63' : '#FF4949'};">
                <h4 style="margin: 0 0 10px 0; color: #333; font-size: 16px; font-weight: 600; border-bottom: 1px solid #eee; padding-bottom: 8px;">${properties.title}</h4>
                ${clusterContent}
                <p style="margin: 6px 0; font-size: 13px; color: #555;"><strong>设备ID:</strong> <span style="color: #333;">${properties.deviceKey}</span></p>
                <p style="margin: 6px 0; font-size: 13px; color: #555;"><strong>状态:</strong>
                  <span style="color: ${properties.isOnline === '在线' ? '#27AA63' : '#FF4949'}; font-weight: 600; padding: 2px 6px; background: ${properties.isOnline === '在线' ? 'rgba(39, 170, 99, 0.1)' : 'rgba(255, 73, 73, 0.1)'}; border-radius: 3px;">
                    ${properties.isOnline}
                  </span>
                </p>
                <p style="margin: 6px 0; font-size: 13px; color: #555;"><strong>地址:</strong> <span style="color: #333;">${properties.address}</span></p>
                <p style="margin: 6px 0; font-size: 13px; color: #555;"><strong>坐标:</strong> <span style="color: #333;">${properties.latitude.toFixed(6)}, ${properties.longitude.toFixed(6)}</span></p>
                <p style="margin: 6px 0; font-size: 13px; color: #555;"><strong>最后上线:</strong> <span style="color: #333;">${properties.onlineTime}</span></p>
                <div style="margin-top: 10px; padding-top: 8px; border-top: 1px solid #eee; font-size: 11px; color: #999;">
                  💡 地图已放大到设备位置，点击按钮返回全局视图
                </div>
                <div style="margin-top: 8px; text-align: center;">
                  <button onclick="window.returnToGlobalView && window.returnToGlobalView()"
                          style="background: #409eff; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 11px; cursor: pointer; margin-right: 8px;">
                    🔍 返回全局视图
                  </button>
                  <button onclick="window.closeInfoWindow && window.closeInfoWindow()"
                          style="background: #909399; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 11px; cursor: pointer;">
                    ❌ 关闭窗口
                  </button>
                </div>
              </div>
            `,
            offset: { x: 0, y: -40 } // 向上偏移，避免遮挡标记
          })

          // 5秒后自动关闭信息窗口（给用户更多时间查看）
          setTimeout(() => {
            if (currentInfoWindow) {
              currentInfoWindow.close()
              currentInfoWindow = null
            }
          }, 5000)
        })
      }
    }

    // 智能调整地图视野，确保能看到所有设备
    if (validDeviceCount > 0 && map) {
      // 延迟确保所有标记都已添加完成
      setTimeout(() => {
        try {
          // 使用辅助函数重新计算最佳视野
          const viewport = calculateOptimalViewport(devices)
          const { center, zoom, bounds } = viewport

          if (bounds) {
            // 设置地图视野，确保能看到所有设备
            map.setCenter(new TMap.LatLng(center.lat, center.lng))
            map.setZoom(zoom)

            // 保存全局视图状态
            globalViewState = {
              center: { lat: center.lat, lng: center.lng },
              zoom: zoom
            }

            console.log('智能视野调整完成:', {
              bounds,
              center,
              zoom,
              deviceCount: devices.length
            })
          }
        } catch (error) {
          console.error('智能调整地图视野失败:', error)
        }
      }, 1500) // 延迟1.5秒确保标记加载完成
    }
  } catch (error) {
    console.error('初始化地图失败:', error)
  }
}

// 切换地图类型
const toggleMapType = (isSatellite: boolean) => {
  if (map) {
    console.log(`地图类型已切换为: ${isSatellite ? '卫星地图' : '普通地图'}`)
    ElMessage.success(`已切换为${isSatellite ? '卫星地图' : '普通地图'}`)
    
    // 腾讯地图需要重新创建地图实例来切换地图类型
    // 保存当前地图状态
    const currentCenter = map.getCenter()
    const currentZoom = map.getZoom()
    
    // 销毁当前地图实例
    map.destroy()
    map = null
    
    // 清除标记
    markers = []
    
    // 延迟重新初始化地图，确保DOM更新完成
    setTimeout(() => {
      // 重新初始化地图，这次会使用新的地图类型
      initMapWithType(isSatellite, currentCenter, currentZoom)
    }, 100)
  }
}

// 使用指定地图类型初始化地图
const initMapWithType = async (isSatellite: boolean, center?: any, zoom?: number) => {
  try {
    // 获取地图密钥
    const key = await getMapKey()
    if (!key) {
      console.error('无法获取地图密钥')
      return
    }

    // 加载地图API
    const TMap = await loadMapScript(key)

    // 确保DOM元素存在
    let mapElement = document.getElementById('deviceMap')
    if (!mapElement) {
      await new Promise((resolve) => setTimeout(resolve, 500))
      mapElement = document.getElementById('deviceMap')
      if (!mapElement) {
        console.error('地图容器元素不存在，无法初始化地图')
        return
      }
    }

    // 使用传入的中心点和缩放级别，或使用默认值
    const mapCenter = center || new TMap.LatLng(35.8617, 104.1954)
    const mapZoom = zoom || 3

    // 创建新的地图实例
    map = new TMap.Map(mapElement, {
      center: mapCenter,
      zoom: mapZoom,
      viewMode: '2D',
      pitch: 0,
      rotation: 0,
      scale: 1,
      mapStyleId: 'style1',
      showIndoorMap: false,
      dragEnable: true,
      zoomEnable: true,
      doubleClickZoom: true,
      scrollWheel: true,
      touchEnable: true,
      keyboardEnable: false,
      baseMap: {
        type: isSatellite ? 'satellite' : 'vector', // 使用指定的地图类型
      },
      jogEnable: true,
      animateEnable: true,
      showIndoorMapPoi: false,
      showIndoorMapControl: false,
      minZoom: 1,
      maxZoom: 18
    })

    // 添加地图点击事件
    map.on('click', (evt: any) => {
      if (!evt.geometry) {
        if (currentInfoWindow) {
          currentInfoWindow.close()
          currentInfoWindow = null
        }
      }
    })

    // 重新获取设备数据并显示
    getDevices()
  } catch (error) {
    console.error('重新初始化地图失败:', error)
  }
}

// 返回全局视图
const returnToGlobalView = () => {
  if (map) {
    // 直接返回到全局视图，不使用动画
    map.setCenter({ lat: globalViewState.center.lat, lng: globalViewState.center.lng })
    map.setZoom(globalViewState.zoom)
  }
}

// 关闭信息窗口
const closeInfoWindow = () => {
  if (currentInfoWindow) {
    currentInfoWindow.close()
    currentInfoWindow = null
  }
}

// 刷新设备数据
const refreshDevices = () => {
  getDevices()
}

// 组件挂载时初始化
onMounted(() => {
  // 暴露函数到全局作用域
  window.returnToGlobalView = returnToGlobalView
  window.closeInfoWindow = closeInfoWindow

  // 延迟初始化，确保DOM完全加载
  nextTick(() => {
    setTimeout(() => {
      getDevices()
    }, 300)
  })
})

// 组件卸载时清理
onUnmounted(() => {
  if (map) {
    map = null
  }
  markers = []
})
</script>

<style scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 900px;
}

.map-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 1000;
}

.map-content {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  min-height: 500px;
  border: 1px solid #e4e7ed;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: default;
}

/* 地图标记悬停效果 */
.map-content :deep(.tmap-marker) {
  transition: transform 0.2s ease-in-out;
}

.map-content :deep(.tmap-marker:hover) {
  transform: scale(1.1);
  z-index: 1000;
}

/* 信息窗口按钮样式 */
.map-content :deep(.tmap-info-window button:hover) {
  opacity: 0.8;
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

.map-legend {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.legend-item:last-child {
  margin-bottom: 0;
}

.legend-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
}

.legend-icon.online {
  background-color: #27aa63;
}

.legend-icon.offline {
  background-color: #ff4949;
}

.legend-item span {
  font-size: 12px;
  color: #333;
}

.device-count {
  font-weight: 600;
  color: #409eff;
  margin-left: 4px;
  background: rgba(64, 158, 255, 0.1);
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
}
</style>
